import React from 'react';
import { connect } from 'dva';
import { Row, Col, Tabs, Input, List, Avatar, Button, Icon, Table, Divider} from 'antd';
import styles from './index.css';
const TabPane = Tabs.TabPane;
const Search = Input.Search;

const columns = [{
  title: 'Name',
  dataIndex: 'name',
  key: 'name',
  render: text => <a>{text}</a>,
}, {
  title: 'Age',
  dataIndex: 'age',
  key: 'age',
}, {
  title: 'Address',
  dataIndex: 'address',
  key: 'address',
}, {
  title: 'Action',
  key: 'action',
  render: (text, record) => (
    <span>
      <a>Action 一 {record.name}</a>
      <Divider type="vertical" />
    </span>
  ),
}];

const data = [{
  key: '1',
  name: 'John Brown',
  age: 32,
  address: 'New York No. 1 Lake Park',
}, {
  key: '2',
  name: 'Jim Green',
  age: 42,
  address: 'London No. 1 Lake Park',
}, {
  key: '3',
  name: 'Joe Black',
  age: 32,
  address: 'Sidney No. 1 Lake Park',
}];

const dataA = [
  {
    title: 'Ant Design Title 1',
  },
  {
    title: 'Ant Design Title 2',
  },
  {
    title: 'Ant Design Title 3',
  },
  {
    title: 'Ant Design Title 4',
  },
];

function callback(key) {
  console.log(key);
}
function IndexPage() {
  return (
    <div className={styles.grandfather}>
      <Row className={styles.boxRow}>
        <Col span={10} className={styles.boxCol}>
          <div className={styles.left}>
            <Tabs defaultActiveKey="1" onChange={callback}>
              <TabPane tab="节点类型图" key="1">
                <Row>
                  <Col span={22} offset={1}>
                    <Search
                      placeholder="input search text"
                      onSearch={value => console.log(value)}
                      enterButton />
                  </Col>
                  <Col span={22} offset={1}>
                    <div className={styles.boxChart}>1</div>
                  </Col>
                  <Col span={22} offset={1}>
                    过滤
                  </Col>
                </Row>
              </TabPane>
              <TabPane tab="节点类型列表" key="2">
                <Row>
                  <Col span={22} offset={1}>
                    <Search
                      placeholder="input search text"
                      onSearch={value => console.log(value)}
                      enterButton />
                  </Col>
                  <Col span={22} offset={1}>
                    <List
                      itemLayout="horizontal"
                      dataSource={dataA}
                      renderItem={item => (
                        <List.Item>
                          <List.Item.Meta
                            avatar={<Avatar src="https://zos.alipayobjects.com/rmsportal/ODTLcjxAfvqbxHnVXCYX.png" />}
                            title={<a href="https://ant.design">{item.title}</a>}/>
                        </List.Item>
                      )}/>
                  </Col>
                  <Col span={22} offset={1}>
                    过滤
                  </Col>
                </Row>
              </TabPane>
            </Tabs>
          </div>
        </Col>
        <Col span={14}>
          <Row>
            <Col span={24}>
              <Row className={styles.rightRow}>
                <Col span={22} offset={1}>
                  <div className={styles.rightHeader}>
                    <div className={styles.rightHeaderTitle}>
                      <Icon type="api" />
                      节点类型(商品)
                    </div>
                    <Button className={styles.rightHeaderButton} type="dashed" size="small">
                      <span className={styles.rightHeaderReset}>重置</span>
                    </Button>
                  </div>
                </Col>
              </Row>
            </Col>
            <Col span={22} offset={1}>
              <Search
                className={styles.rightSearchBox}
                placeholder="input search text"
                onSearch={value => console.log(value)}
                enterButton />
            </Col>
            <Col span={24}>
              <Row>
                <Col span={22} offset={1}>
                  <div className={styles.rightResult}>
                    <div className={styles.rightResultTitle}>
                      <Icon type="database" />
                      查询结果：
                    </div>
                    <div className={styles.rightResultData}>
                      <Table columns={columns} dataSource={data}></Table>
                    </div>
                  </div>
                </Col>
              </Row>
            </Col>
          </Row>
        </Col>
      </Row>
    </div>
  );
}

IndexPage.propTypes = {
};

export default connect()(IndexPage);
